<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
        当前浏览器不支持Canvas，请更换浏览器
    </canvas>
    <script>
        window.onload = function () {
            var canvas = document.getElementById("canvas");

            canvas.width = 800;
            canvas.height = 800;

            var context = canvas.getContext("2d");

            strokeRoundRect(context, 150, 150, 500, 500, 10, '#bbada0');
            for (var i = 0; i < 4; i++){
                for (var j = 0; j < 4; j++){
                    fillRoundRect(context, 170 + i * 120, 170 + j * 120, 100, 100, 6, '#ccc0b3');
                }
            }
        }
        function fillRoundRect(cxt, x, y, width, height, radius, /*optional*/fillColor) {
            if(2*radius > width || 2*radius > height) return;

            cxt.save();
            cxt.translate(x, y);
            pathRoundRect(cxt, width, height, radius);
            cxt.fillStyle = fillColor || 'black';
            cxt.fill();
            cxt.restore();
        }

        function strokeRoundRect(cxt, x, y, width, height, radius, /*optional*/lineWidth, /*optional*/strokeColor) {
            cxt.save();
            cxt.translate(x, y);
            pathRoundRect(cxt, width, height, radius);
            cxt.lineWidth = lineWidth || 1;
            cxt.strokeStyle = strokeColor || 'black';
            cxt.stroke();
            cxt.restore();
        }

        function pathRoundRect(cxt, width, height, radius) {
            cxt.beginPath();
            cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
            cxt.lineTo(radius, height);
            cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
            cxt.lineTo(0, radius);
            cxt.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
            cxt.lineTo(width - radius, 0);
            cxt.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
            cxt.closePath();
        }
    </script>
</body>
</html>